<template>
    <div>
 <van-nav-bar title="错题收藏" left-text="返回" left-arrow  @click-left="onClickLeft">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>
    </div>
    
    <!-- <div class="cuo">
      <div class="tongji">
        <p>错题统计</p>
    </div>
    <div class="qingkong">
      <van-icon name="delete-o" size="25px"/>
        <p>清空</p>
    </div>
    </div> -->

    <div class="yichu">
      <div>
        <p>考试答对后自动移除错题</p>
      </div>
      <div>
        <van-switch v-model="checked"  size="22px"/>
      </div>
    </div>

    <div class="cuoti">
      <p>错题总数</p>
      <p>收藏题数</p>
      <p>错题/已做题</p>
    </div>

    <div class="shuliang">
      <p>{{ total }}</p>
      <p>{{ collect }}</p>
      <p>{{ ratio + '%' }}</p>
    </div>

    <div class="btn-box">
      <div class="btn1">
        <van-button round type="success" color="#0AB2FB" block style="width: 200px;" @click="$router.push('/cp/'+id1)">错题练习</van-button>
      </div>
  
      <div class="btn2">
        <van-button round type="success" color="#0AB2FB" block style="width: 200px;" @click="$router.push('/cp/'+id2)">收藏练习</van-button>
      </div>
    </div>

</template>

<script setup>
import { createApp,ref,onMounted } from 'vue';
import { NavBar,Dialog,Icon,Switch} from 'vant';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import httpApi from '@/http';

const route = useRoute()
const store = useStore()

let id1 = null
let id2 = null
let subject = ''
const aid = route.params.id
if(aid==1){
  id1 = 3
  id2 = 4
  subject = '科目一'
}else {
  id1 = 7
  id2 = 8
  subject = '科目四'
}

const total = ref(0)
const collect = ref(0)
const ratio = ref(0)

onMounted(()=>{
  let done_subj = subject
  let userId = store.state.user.user_id
  httpApi.doneApi.queryByUserA({userId,done_subj}).then(res=>{
    // console.log('已激活题',res)
    let end = 0
    let wrong = 0
    res.data.data.forEach(item=>{
      if(item.done_state){
        end += 1
        if(item.done_state==2) {
          wrong += 1
        }
      }
      if(item.done_collect){
        collect.value += 1
      }
    })
    let x = wrong*100/end||0
    total.value = wrong
    if(end==0){
      ratio.value = 0
    }else if(wrong*100%end < end*0.005){
      ratio.value = Math.floor(wrong*100/end)
    }else if(wrong*1000%end < end*0.05){
      ratio.value = x.toFixed(1)
    }else {
      ratio.value = x.toFixed(2)
    }
  })
})

const app = createApp();
app.use(NavBar);
app.use(Dialog);
app.use(Icon);
app.use(Switch);


const checked = ref(true);
const onClickLeft = () => history.back();

</script>

<style lang="scss" scoped>
.cuo{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.tongji{
  margin-left: 10px;
  font-weight: bold;
}
.qingkong {
  display: flex;
  margin-right: 10px;
  font-weight: lighter;
}
.yichu {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.yichu p {
  margin-left: 20px;
}
.van-switch {
  margin-right: 20px;
}
.cuoti {
  display: flex;
  font-size: 12px;
  justify-content: space-evenly;
  margin-top: 30px;
}
.shuliang {
  display: flex;
  font-size: 18px;
  font-weight: bold;
  justify-content: space-evenly;
  margin-top: 20px;
}
.shuliang>p:last-child{
  color: red;
}

.btn-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .btn1 {
    margin: 60px 0 30px;
  }
}

</style>